<template>
	<view class="myAuth">
		<!-- <view class="comTab">
			<text>商品类型：</text>
			<u-radio-group v-model="comStatus" placement="row" @change="changeComStatus">
				<u-radio activeColor="#2CB9A4" label="商品" name="商品"></u-radio>
				<u-radio activeColor="#2CB9A4" label="次数卡" name="次数卡"></u-radio>
			</u-radio-group>
		</view> -->
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="商品图片" :borderBottom="true" ref="item1" labelWidth="100" labelPosition="top">
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="6" @upImgs="upImgs" ref="imgUpload"
					:imageArr="images" :disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<u-form-item label="商品名称" prop="name" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.name" border="none" placeholder="请输入商品名称" maxlength="11">
				</u--input>
			</u-form-item>
			<view class="" v-if="formData.type_data==1">
				<u-form-item label="商品原价" prop="cost_price" borderBottom ref="item1" labelWidth="100" :required="type!=1">
					<u--input v-model="formData.cost_price" border="none" placeholder="请输入商品原价" maxlength="11">
					</u--input>
				</u-form-item>
			</view>
			<u-form-item label="商品现价" prop="price" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.price" border="none" placeholder="请输入价格" maxlength="11">
				</u--input>
			</u-form-item>
			<view class="" v-if="formData.type_data==1">
				<u-form-item label="洗车次数" prop="number" borderBottom ref="item1" labelWidth="100" :required="type!=1">
					<u--input v-model="formData.number" border="none" placeholder="请输入价格" maxlength="11">
					</u--input>
				</u-form-item>
			</view>
			<view class="" v-if="formData.type_data==1">
				<u-form-item label="有效时间" prop="start_time" borderBottom ref="item1" labelWidth="100" :required="type!=1"
					@click="showPop">
					{{formData.start_time}}-{{formData.end_time}}
				</u-form-item>
			</view>
			<u-form-item label="描述" prop="refer" borderBottom ref="item1" labelWidth="100" :required="false"
				labelPosition="top">
				<u--textarea v-model="formData.refer" border="none" placeholder="请输入描述" type="text">
				</u--textarea>
			</u-form-item>

		</u--form>
		<view class="botBtn">
			<view style="width: 100%;">
				<u-button class="custom-style" text="提交"
					customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #C7EACE 100%);color:#fff;margin-top:20px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
		<lingfeng-timepicker ref="timePop" type="datetime-range" :minDate="minDate" :maxDate="maxDate"
			@change="timeChange"></lingfeng-timepicker>
	</view>
</template>
<style>
	page {
		background-color: #fff;
	}
</style>
<script>
	import eventBUs from '../../utils/eventBus.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import imgUpload from '@/components/common/imgUpload.vue'
	import {
		addGoods,
		updateGoods
	} from '@/request/api.js'
	export default {
		components: {
			vvSelect,
			imgUpload
		},
		data() {
			return {
				comStatus: '商品',
				minDate:{
					year: 2020,
					month: 3,
					date: 5
				},
				maxDate:{
					year: 2033,
					month: 9,
					date: 20
				},
				formData: {
					name: "",
					price: '',
					refer: '',
					images: '',
					id: '',
					cost_price:'',//原价
					number:'',//次数
					start_time:'',//开始时间
					end_time:'',//结束时间
					type_data:0
				},
				images: [],
				rules: {
					'name': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入名称',
					},
					'price': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入价格',
						trigger: ['blur', 'change'],
						pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
					},
					'cost_price': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入原价',
					},
					'number': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入次数',
					},
					'start_time': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请选择时间',
					},
					
					
				}
			}
		},
		onLoad(res) {
			// let data = JSON.parxse(res.data)
			console.log(res.type,'type')
			if(res.type == 0){
				this.formData.type_data = 0
				uni.setNavigationBarTitle({
					title:'添加商品'
				})
			}else if(res.type == 1){
				this.formData.type_data = 1
				uni.setNavigationBarTitle({
					title:'添加次卡'
				})
			}
			if (res.data) {
				uni.setNavigationBarTitle({
					title:'修改商品'
				})
				this.formData = JSON.parse(res.data)
				if (this.formData.images) {
					this.formData.images.map(item => {
						this.images.push({
							url: `${item}`
						})
					})
				}
				console.log(this.formData, 11)
			}
		},
		methods: {
			showPop() {
				this.$refs.timePop.show();
			},
			 timeChange(val) {
				console.log(val,232323);
				this.formData.start_time = val[0]+':00'
				this.formData.end_time = val[1]+':00'
				this.$refs.form1.validateField('start_time')
			},
			changeComStatus(e) {
				this.empt()
				if (e == '商品') {
					this.formData.type_data = 0
				} else {
					this.formData.type_data = 1
				}
				this.$refs.form1.setRules(this.rules)
				// this.empt()
			},
			empt() {
				this.$refs.imgUpload.empt()
				for (let k in this.formData) {
					this.formData[k] = ''
				}
			},
			upImgs(e) {
				let arr = e.images
				this.formData.images = arr.join(',') //
				console.log(e, this.formData.images, 'images');
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.formData.ibec_id = e.toString()
				this.$refs.form1.validateField('ibec_id')
			},
			async getUser() {
				let res = await getStaff()
				this.formData.name = res.data.ibec.name
				this.formData.ibec_id = res.data.ibec.id
				this.formData.mobile = res.data.mobile
				uni.setStorageSync('userInfo', res.data)
				this.$eventBus.$emit('hasLogin', true);
			},
			select(e) {
				this.formData.name = e.name
				this.formData.ibec_id = e.id
				this.$refs.form1.validateField('ibec_id')
			},
			goAuth() {
				console.log(this.formData)
				delete this.formData.status
				this.$refs.form1.validate().then(res => {
					this.formData.images = this.formData.images.toString()
					if (this.formData.id) {
						this.updateGoods()
						return
					}
					addGoods(this.formData).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=添加成功'
							})
							this.empt()
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('请正确填写信息')
				})
			},
			async updateGoods() {
				let res = await updateGoods(this.formData)
				uni.navigateTo({
					url: '/my_pages/components/success?title=修改成功'
				})
				this.empt()
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.comTab {
		display: flex;
	}

	.myAuth {
		padding: 30rpx;
	}

	::v-deep .u-input {
		background-color: #fff !important;
	}

	::v-deep .u-transition {
		overflow: scroll !important;
		height: 50vh !important;
	}

	.compony {
		display: flex;
		padding-top: 6px;
		padding-left: 9px;
		padding-right: 9px;
		height: 24px;
		border-radius: 4px;
		justify-content: space-between;

		.select {
			flex: 1;
		}
	}

	.botBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		// position: fixed;
		// right: 0;
		padding: 20rpx;
		// left: 0;
		// bottom: 60rpx;
	}

	.custom-style {
		width: 48% !important;
	}
</style>